<template>
	<view class="work-record">
		<view class="line"><text></text></view>
		<view class="content">
			<view class="content_title">添加维修记录</view>
			<view class="content_item">
				<view class="name">
					维修类型
					<text>*</text>
				</view>
				<dropdown :list="list" :value="obj.disposeType" @change="getData" @showDropDown="showDropDown"></dropdown>
			</view>
			<view class="content_item">
				<view class="name">
					电梯配件
					<text>*</text>
				</view>
				<repair-fitting v-if="obj.disposeType != 2" :elevatorId="elevatorId" :partsId="partsId" :partsName="partsName" @repairFit="getPart"
					:reset="restFlag" ref="repairFitting"></repair-fitting>
        <dropdown v-if="obj.disposeType === 2 && partsList && partsList.length > 0" :list="partsListText" :value="partsListIndex" @change="getPartsData"></dropdown>
        <view class="disabled-select" v-else-if="obj.disposeType === 2 && disabledParts">{{ partsName }}
					<text v-if="partsName && floorStandNames">({{ floorStandNames.replaceAll(',','>') }})</text>
				</view>
			</view>
			<view class="imgBox">
				<view class="name">
					设备检修/更换配件照片
					<text>*</text>
				</view>
				<image-drag-sort :max="9" @changeList="changeImg" :list="obj.disposeImgUrl"></image-drag-sort>
			</view>
			<!-- 备注 -->
			<view class="notice">
				<view class="name">
					<view>维修备注</view>
					<view>(选填)</view>
				</view>
				<view class="area">
					<textarea v-model="obj.disposeDesc" placeholder="请输入备注内容" placeholder-class="textare"
						style="font-size: 28rpx;height:150rpx;width: 100%;" maxlength="300" :always-embed="true" />
					<view class="length">{{ obj.disposeDesc.length + '/300' }}</view>
				</view>
			</view>
		</view>

		<view class="save"><button hover-class="none" @click="handleSave">提交</button></view>
	</view>
</template>

<script>
import ImageDragSort from '@/components/image-drag-sort/index.vue';
import dropdown from '@/components/dropdown/dropdown.vue';
// import unipopup from '@/components/uni-popup/uni-popup';

import { mapState, mapActions } from 'vuex';
import { editCHeckRecord } from '@/apis/workOrder.js';
import { getPartsDetail } from '@/apis/workOrder.js';
import RepairFitting from '@/components/repairFitting/repairFitting.vue';
import { update, setRecord, fetchDetail, repairFittingSelected } from '@/apis/repair.js';

export default {
	props: {
		partsId: {
			type: String,
			default: ''
		},
		partsName: {
			type: String,
			default: ''
		},
		floorStandIds: {
			type: String,
			default: ''
		},
		floorStandNames: {
			type: String,
			default: ''
		},
		planId: {
			type: String
		},
		restFlag: {
			type: String
		},
		elevatorId:{
			type: String
		},
		disabledParts:{
			type: Boolean,
			default: false
		},
		partsList: {
			type: Array,
			default: () => []
		}
	},
	components: {
		ImageDragSort,
		dropdown,
		RepairFitting,

	},

	data() {
		return {

			obj: {
				disposeImgUrl: [],
				disposeDesc: '',
				disposeType: '',
				checkTypeId: '',
				partIds: '',
				checkContentId: '',
				partNames: ''
			},
			list: ['设备维修', '更换部件'],
			refresh: 0,
			isEdit: false,
			planOrderStatus: '',
			other: '',
			partsListIndex: 0
		};
	},
	watch: {},
	created() {
		// repairFittingSelected().then(e => {
		// 	this.listTrees = e.data;
		// });
	},
	computed: {
		...mapState('user', ['userinfo']),
		partsListText() {
			return this.partsList.map(v=>v.partsName);
		}
	},
	methods: {
		showDropDown(res) {
			// this.$refs.repairFitting.close();
		},

		// 获取设备类型
		getData(res) {
			this.obj.disposeType = res + 1;
			console.log('this.obj.disposeType', this.obj.disposeType);
		},
		// 获取配件数据
		getPartsData(index) {
			this.partsListIndex = index + 1;
			console.log('getPartsData', this.partsList[index]);
			console.log('getPartsData', index);
			this.obj.partIds = this.partsList[index].partsId;
			this.obj.partNames = this.partsList[index].partsName.replaceAll('>', '&&');
			if (this.partsList[index].floorStandIds) {
				this.obj.floorStandIds = this.partsList[index].floorStandIds;
			}
			if (this.partsList[index].floorStandNames) {
				this.obj.floorStandNames = this.partsList[index].floorStandNames;
			}
			console.log(this.obj,'getPartsData');
		},
		getPart(res) {
			let partIds = res.ids || [];
			let partNames = res.names || [];
			this.other = res.other;
			if (res.flag && res.flag.id) {
				this.obj.floorStandIds = res.flag.ids.join(',');
				this.obj.floorStandNames = res.flag.names.join(',');
			} else {
				delete this.obj.floorStandIds;
				delete this.obj.floorStandNames;
			}
			this.obj.partIds = partIds.join(',');
			this.obj.partNames = partNames.join('&&');
		},
		changeImg(val) {
			console.log(val, 'val的值'  );
			this.obj.disposeImgUrl = val;
		},
		async handleSave() {
			uni.showLoading({
				title: '请稍后',
				mask: true
			});
			await this.getDetail();
			uni.hideLoading();
			if (this.planOrderStatus === 7) {
				console.log('完成');
				this.$emit('hadDone');
			} else {
				let { disposeImgUrl, disposeDesc, disposeType, partNames } = this.obj;

				if (!disposeImgUrl.length || (!partNames && this.obj.disposeType != 2) || !disposeType) {
					let str = '';
					if (!disposeType) {
						str = '请选择维修类型';
					}
					if (!disposeImgUrl.length) {
						str = '请上传设备检修/更换配件照片';
					}
					if (!partNames && this.obj.disposeType != 2) {
						str = '请选择电梯配件';
					}
					console.log(this.obj);
					uni.showToast({
						title: str,
						icon: 'none'
					});
					return false;
				} else {
					uni.showLoading({
						title: '提交',
						mask: true
					});
					if (this.obj.disposeType == 2 && this.partsList.length === 0) {
						this.obj.floorStandIds = this.floorStandIds;
						this.obj.floorStandNames = this.floorStandNames;
						this.obj.partIds = this.partsId;
						this.obj.partNames = this.partsName.split('>').join('&&');
					} else {
						let parts = this.obj.partNames.split('&&');
						if (!parts[parts.length - 1]) {
							uni.hideLoading();
							uni.showToast({
								title: '自定义配件内容不能为空',
								icon: 'none'
							});
							return;
						}
					}
					console.log('更新部件', { ...this.obj, planId: this.planId, recordDesc: '创建了记录', userId: this.userinfo.user_id });
					let obj = JSON.parse(JSON.stringify(this.obj));
					let imgs = obj.disposeImgUrl;
					let arr = [];
					for (let i = 0; i < imgs.length; i++) {
						arr.push({
							url: imgs[i],
							type: 'image'
						});
					}
					obj.disposeImgUrl = arr;
					update({ ...obj, planId: this.planId, userId: this.userinfo.user_id }).then(res => {
						console.log(res);
						if (this.other) {
							let partsIds = this.obj.partIds.split(',');
							this.addCustompartslog({
								partId: partsIds[partsIds.length - 1],
								other: this.other,
								planId: this.planId,
								fromLocation: 'subpages/workOrders/partOrder',
							});
						}
						this.addMsg(res.data);
					});
				}
			}
		},
		addMsg(checkHistoryId) {
			uni.showLoading({
				title: '保存中',
				mask: true
			});

			const params = {
				planId: this.planId,
				userId: this.userinfo.user_id,
				checkHistoryId: checkHistoryId,
				recordLog: '创建了记录',
				recordDataValue: this.obj
			};
			editCHeckRecord(params).then(res => {
				console.log(res);

				uni.hideLoading();
				this.obj = {
					disposeImgUrl: [],
					disposeDesc: '',
					disposeType: '',
					checkTypeId: '',
					partIds: '',
					checkContentId: '',
					recordDataValue: ''
				};
				uni.showToast({
					title: '新增成功',
					icon: 'none'
				});
				this.$emit('update');
			});
		},
		getDetail() {
			return new Promise(resolve => {
				getPartsDetail({ planId: this.planId }).then(res => {
					if (res) {
						this.planOrderStatus = res.data.status;
						resolve();
					}
				});
			});
		}
	}
};
</script>
<style>
textare {
	/* height: 200rpx; */
}

.textare {
	/* color: red; */
	/* 	width: 100%!important; */
}
</style>
<style lang="scss" scoped>
.disabled-select {
	width: calc(100% - 48rpx);
	// height: 72rpx;
	background: #f4f4f4;
	border-radius: 4rpx;
	color: #666666;
	font-size: 26rpx;
	padding: 0rpx 24rpx;
	line-height: 71rpx;
	letter-spacing: 1rpx;
}

.work-record {
	background-color: #fff;
	padding: 20rpx 40rpx 32rpx 40rpx;
	border-radius: 8rpx 8rpx 0rpx 0rpx;
	box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);

	.line {
		margin-bottom: 18rpx;
		display: flex;
		justify-content: center;

		text {
			width: 64rpx;
			height: 10rpx;
			background: #d8d8d8;
			border-radius: 6rpx;
		}
	}

	.content {
		.content_title {
			font-size: 32rpx;
			font-weight: 500;
			color: #333;
			margin-bottom: 28rpx;
		}

		.content_item {
			margin-bottom: 16rpx;

			.name {
				font-size: 26rpx;
				margin-bottom: 16rpx;
				color: #333;

				text {
					color: #e54b4b;
				}
			}
		}

		.imgBox {
			padding-bottom: 32rpx;

			// border-bottom: 2rpx solid #e9e9e9;
			.name {
				margin-bottom: 16rpx;
				font-size: 26rpx;
				color: #333;

				text {
					color: #e54b4b;
				}
			}

		}

		.notice {
			width: 100%;
			padding-top: 32rpx;
			padding-bottom: 20rpx;

			// height: 200rpx;
			.name {
				display: flex;
				font-size: 26rpx;
				color: #333;

				margin-bottom: 16rpx:nth-child(2) {
					color: #999999;
				}
			}

			.area {
				padding: 20rpx;
				border: 2rpx solid #e9e9e9;
			}
		}

		textarea {
			font-size: 28rpx;
		}

		.length {
			text-align: right;
			// padding-bottom: 20rpx;
			color: #ccc;
		}
	}

	.save {
		display: flex;
		justify-content: center;

		button {
			display: flex;
			width: 670rpx;
			height: 70rpx;
			// background: #0091ff;
			border-radius: 8rpx;
			// color: #fff;
			justify-content: center;
			align-items: center;
		}

		// .disabled{
		// 	color: #fff;
		// 	background-color: #ccc!important;
		// 	pointer-events: none;

		// }
	}
}
</style>
